<template>
	<!-- 充值 -->
	<div class="w750">
		<!-- 充值 -->
		<div class="order-pay" :class="themes.theme">
			<p class="way-tit">支付方式</p>
			<div class="pay-way">
				<div class="item" v-if="queryPayTypeData['ALP_MOBILE'] == 1" @click="choosePayType(payType.ALIPAY)">
					<span class="item-img"><img src="../../assets/images/pay-zhi.png" alt=""/></span>
					<span class="item-con">支付宝</span>
					<span :class="action == payType.ALIPAY? 'choose cur' : 'choose'"></span>
				</div>
				<div class="item" v-if="queryPayTypeData['WX_PAY'] == 1 || queryPayTypeData['WX_APP_PAY'] == 1 " @click="choosePayType(payType.WXPAY)">
					<span class="item-img"><img src="../../assets/images/pay-wei.png" alt=""/></span>
					<span class="item-con">微信</span>
					<span :class="action == payType.WXPAY ? 'choose cur' : 'choose'"></span>
				</div>
				<!-- 以后如果加上‘通联支付’的话，就加上这个 -->
				<!-- <div class="item" v-if="queryPayTypeData.TONGLIAN_PAY==1" @click="choseTONGLIAN_PAY()">
							<span class="item-img"><img src="../../assets/images/pay-tong.png" alt=""></span>
							<span class="item-con">通联支付</span>
							<span :class="action=='TONGLIAN_PAY'?'choose cur':'choose'"></span>
						</div> -->
				<div class="item" v-if="queryPayTypeData['SIMULATE'] == 1" @click="choosePayType(payType.SIMULATE)">
					<span class="item-img"><img src="../../assets/images/pay-mo.png" alt=""/></span>
					<span class="item-con">模拟支付</span>
					<span :class="action == payType.SIMULATE ? 'choose cur' : 'choose'"></span>
				</div>
			</div>
			<p class="way-tit">充值金额</p>
			<div class="recharge">
				<span class="unit">&#65509;</span>
				<input class="num" type="text" placeholder="充值金额必须大于0且不超过1,000,000" v-model.text="rechargeMoney" />
			</div>
			<div class="b-btn" @click="rechargeClick"><iframe name="iframeOrderPayResult" style="display:none;"></iframe><span class="btn-r">立即充值</span></div>
			<!--支付表单-->
		</div>

		<!-- /充值 -->
		<van-dialog
			v-model="show"
			title="请确认微信支付是否已完成"
			show-cancel-button
			confirm-button-text="已完成支付"
			cancel-button-text="重新支付"
			@confirm="goOrder"
			@cancel="reApply"
		></van-dialog>

		<div class="pay" v-html="payData" v-if="payData"></div>
	</div>
</template>

<script>
import { getUa } from 'utils/utils';
import {mapState} from 'vuex'
import { queryPayType } from 'api/common/common'; //公共服务接口-->获取支付方式
import { recharge } from 'api/preDeposit';
import platformPayto from 'service/payTo'; //调用支付
export default {
	components: {},
	data() {
		return {
        	 
			queryPayTypeData: '', //存放获取支付方式后的集合
			action: '', //用来记录支付方式以及choose cur显不显示
			rechargeMoney: '', //存放用于判断输入的金额数据
			payData: null,// 支付返回html表单

			show: false, //是否显示 支付完成询问弹框

			payType: platformPayto.payType,//platformPayto定义的支付类型
		};
	},
	mounted() {
		let that = this;


		this.action = this.payType.ALIPAY;

		//如果有路由参数
		if (this.$route.query) {
			if (this.$route.query.isReturn) {//有isReturn参数说明是微信H5支付返回
				this.show = true;
			}
		}

		queryPayType().then(res => {
			//公共服务接口-->获取支付方式
			if (res.status == 1) {
				this.queryPayTypeData = res.result;
			} else {
				this.$toast({ duration: 1000, message: res.msg });
			}
		});
	},

	watch: {
		rechargeMoney(val, oldVal) {
			if (val < 0) {
				this.rechargeMoney = 0;
				this.$toast({ duration: 1000, message: '充值金额必须大于0' });
			} else if (val > 1000000) {
				this.rechargeMoney = oldVal;
				this.$toast({ duration: 1000, message: '充值金额最多1,000,000' });
			} else if (!/^\d+(\.\d{0,2})?$/.test(val)) {
				if (val) {
					this.rechargeMoney = oldVal;
				}
			}
		}
	},

	methods: {

		//去订单列表
		goOrder() {
			this.$router.replace('/preDeposit');
		},

		/**
		 * 选择支付方式
		 */
		choosePayType(payTypeValue){
			this.action = payTypeValue;
		},

		//点击‘立即充值’
		rechargeClick() {

			if(!platformPayto.isSupportPayTypes(this.action)){
				this.$toast({ duration: 1000, message: '请勾选支付方式' });
				return;
			}

			if (!this.rechargeMoney || this.rechargeMoney <= 0 || this.rechargeMoney > 1000000) {
				this.$toast({ duration: 1000, message: '请输入充值金额' });
				return;
			}

			//防连续点击
			this.$toast.loading({ mask: true, forbidClick: true, message: '充值中...' });

			//调接口生成充值
			let rechargeParam = {
				"amount": this.rechargeMoney,
				"paytypeId": this.action
			} ;

			recharge(rechargeParam).then(res => {
				//充值接口
				if (res.status != 1) {
					this.$toast({ duration: 1000, message: res.msg });
					return;
				}

				if(!res.result){
					this.$toast({ duration: 1000, message: "充值错误, 请联系商城客服!" });
					return;
				}

				let subNumbers = [res.result.pdrSn];

				//如果是微信端打开阿里支付
				if (getUa().isWeixin && this.action == platformPayto.payType.ALIPAY) {
					this.$toast.clear();
					this.$router.replace({
						path: `/pay`,
						query: {
							payType: this.action,
							subNumbers: subNumbers.join(","),
							subSettlementType: 'USER_PRED_RECHARGE'
						}
					});
					return;
				}

				//‘立即充值’获取到pdrSn后调用payTo接口
				return platformPayto.recharge(this.action, subNumbers);
			}).then(res => {

				if (res.success) {
					this.$toast.clear();
					//说明返回的类型是表单, 需要前端发起请求真实支付 处理成功后由后端重定向到支付结果
					if(res.dataType == "form"){
						this.payData = res.data.prepayResult;
						this.$nextTick(() => {document.forms[0].submit()})
					}else{//否则返回的是JSON
						if(res.isApp){//如果是APP, 则说明是已经call起APP完成支付回来, 应该直接跳转充值结果页面

							this.$router.replace({
								path: `/preDeposit/rechargeResult`,
								query: {
									subSettlementSn: res.data.subSettlementSn,
									subSettlementType: res.data.subSettlementType
								}
							});
						}else {//目前应该没有这种情况产生

						}
					}
				} else {
					this.$toast({ duration: 1000, message: res.msg});
				}
			}).catch(e => {
				this.$toast({ duration: 1000, message: "网络异常, 请检查您的网络设置!" });
			}).finally(e => {

			});
		},

		//重新付款, 只有微信H5支付,返回时才会调用这个
		reApply() {
			this.action = payType.WXPAY;
			this.rechargeMoney = this.$route.query.totalAmount;
			this.rechargeClick();
		}
	},
	computed: {
		...mapState(['themes']),
	},
};
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/pre-deposit.css" scoped></style>